<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table#tab{
				border-collapse: collapse;
				border:1px solid red;
				width: 500px;
				text-align: center;
			}
			table#tab tr,
			table#tab tr th,
			table#tab tr td{
				border: 1px solid red;
			}
			table#tab tr td a{
				font-size: 12px;
				cursor: pointer;
			}
			.edit{
				color: #0000FF;
			}
			.delete{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<table id="tab">
				<thead>
					<tr>
						<th>ID</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
					
				</tbody>
			</table>
		</div>
		<script>
			
		   var arr=[
			   {id:1,name:"马腾飞",age:100,sex:0},
			   {id:2,name:"富丽君",age:16,sex:1},
			   {id:3,name:"邢镇",age:18,sex:0},
			   {id:4,name:"刘帅青",age:16,sex:1}
		   ]
		   
		   var tbody=document.getElementById("tbody");
		   tbody.innerHTML="";//清空tbody;
		   var trs="";
		   
		   for(var i=0,len=arr.length;i<len;i++){
			   var tr="<tr>"+
						"<td>"+arr[i].id+"</td>"+
						"<td>"+arr[i].name+"</td>"+
						"<td>"+arr[i].age+"</td>"+
						"<td>"+(arr[i].sex=="0"?"小哥哥":"小姐姐")+"</td>"+
						"<td>"+
							"<a class='edit'>编辑</a> "+
							" <a class='delete'>删除</a>"+
						"</td>"+
					"</tr>"
				//console.log("tr:",tr);
				trs+=tr;
		   }
		   tbody.innerHTML=trs;
		</script>
	</body>
</html>
